<script setup>

</script>

<template>
  <el-carousel :interval="4000" type="card" height="220px" class=" justify-center">
    <el-carousel-item class="el-car-item" v-for="(item , index) in urls" :key="index">
      <img class="img" :src = "item"/>
    </el-carousel-item>
  </el-carousel>

  <el-row style="min-height:50vh;" class="all flex ep-bg-purple-dark justify-center items-center">
    <!-- <el-col :span="5"><div class="grid-content"/>
      <el-form-item>
        <el-button type="primary" @click="set">设置Cookie</el-button>
      </el-form-item>
      
      <el-form-item>
        <el-button type="success" @click="remove">清除Cookie</el-button>
      </el-form-item>
      
      <el-form-item>
        <el-button type="info" @click="get">读取Cookie</el-button>
      </el-form-item>
    </el-col> -->
    <el-col :span="24" class="flex justify-center items-center ">
      <ul class="myUl">
        <li class="myIl"><div class="myDiv">家</div></li>
        <li class="myIl"><div class="myDiv">庭</div></li>
        <li class="myIl"><div class="myDiv">医</div></li>
        <li class="myIl"><div class="myDiv">生</div></li>
        <li class="myIl"><div class="myDiv">管</div></li>
        <li class="myIl"><div class="myDiv">理</div></li>
        <li class="myIl"><div class="myDiv">系</div></li>
        <li class="myIl"><div class="myDiv">统</div></li>
      </ul>
    </el-col>
  </el-row>
  <el-divider>
      <el-icon><star-filled /></el-icon>
  </el-divider>
  <el-col :span="24" class="bottom flex justify-center items-center mt-8 space-x-10">
      <el-form-item>
        <el-button class = "myButton" type="primary" size="large" @click="manager">管理员登录</el-button>
      </el-form-item>
      
      <el-form-item>
        <el-button class = "myButton" type="primary"  size="large" @click="doctor">医护人员登录</el-button>
      </el-form-item>
      
      <el-form-item>
        <el-button class = "myButton" type="primary"  size="large" @click="user">普通用户登录</el-button>
      </el-form-item>
  </el-col>
</template>

<script setup>
import { useCookies } from '@vueuse/integrations/useCookies'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const urls = [
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]

const cookie = useCookies()
const router = useRouter()

function set(){
  cookie.set("admin-token","123456789")
  ElMessage({
    message: 'Congrats, 设置成功',
    type: 'success',
  })
}

function get(){
  cookie.get()
  ElMessage({
    message: 'Congrats, 获取成功',
    type: 'success',
  })
}

function remove(){
  cookie.remove("admin-token")
  ElMessage({
    message: 'Congrats, 清除成功',
    type: 'success',
  })
}

function manager(){
  ElMessage({
    message: '管理员登录',
    type: 'success',
  })
  router.push({
    path:'/Login',
    query:{
      type:0
    }
  })
}

function doctor(){
  ElMessage({
    message: '医生登录',
    type: 'success',
  })
  router.push({
    path:'/Login',
    query:{
      type: 2
    }
  })
}

function user(){
  ElMessage({
    message: '用户登录',
    type: 'success',
  })
  router.push({
    path:'/Login',
    query:{
      type: 1
    }
  })
}

</script>

<style scoped>
.myUl{
  position: relative;
  display: flex;
  z-index: 2;
}

.myIl{
  position: relative;
  list-style: none;
  margin: 10px;
}

.myDiv{
  position: relative;
  width: 80px;
  height: 80px;
  display: inline-block;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
  font-size: 32px;
  border:1px solid rgba(255,255,255,0.4);
  border-right: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  /* 盒子阴影 */
  box-shadow: 0px 5px 45px rgba(0,0,0,0.1);
  /* 背景模糊 */
  backdrop-filter: blur(2px);
  /* 加个动画过渡，动画才不会太过生硬 */
  transition: all 0.5s;
  overflow: hidden;
}

/* 加个扫光动画 */
.myDiv::before{
  content: "";
  position: absolute;
  top:0px;
  left:0px;
  width: 50px;
  height: 100%;
  background-color: #fff;
  /* 元素沿X轴45横切，沿X轴右移150px */
  transform: skewX(45deg) translateX(150px);
  /* 动画过渡 */
  transition: all 0.5s;
}
.myDiv:hover::before{
  /* 元素沿X轴45横切，沿X轴左移150px */
  transform: skewX(45deg) translateX(-150px);
}
.myDiv:hover{
  transform: translateY(-15px);
}
.el-car-item{
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-carousel__item:nth-child(2n) {
  /* border: 2px; */
  background-color: #c2d8e6e9;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #cadee7cf;
}
.all{
  background-image: linear-gradient(200deg,#5ee7df,#b490ca);
}

.all::before{
  position:absolute;
  content: "";
  z-index: 2;
  width: 170px;
  height: 170px;
  top: 90%;
  left: 95%;
  transform: translate(-100%,-80%);
  background-color: #ffe53b;
  background-image: linear-gradient(147deg,#ffe53b 0%,#ff2525 74%);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
  animation: pulse 1s infinite;
}

.all::after{
  position:absolute;
  content: "";
  z-index: 2;
  width: 130px;
  height: 130px;
  top: 70%;
  left: 98%;
  transform: translate(-100%,-80%);
  background-color: #fa8bff;
  background-image: linear-gradient(45deg,#fa8bff 0%,#2bff88 90%);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  50%{
    box-shadow: 0 0 0 50px rgba(255,255,255,0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes animate {
  50%{
    box-shadow: 0 0 0 30px #02aab000;
    color: rgb(199, 102, 18);
  }
  100%{
    box-shadow: 0 0 0 0 #02aab000;
    color: #fff;
  }
}

.myButton{
  width: 150px;
  border: 0;
  background-image: linear-gradient(to right,#02aab0 0%,#00cdac 50%,#02aab0 100%);
  background-size: 200% auto;
  color: #fff;
  outline: none;
  cursor: pointer;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  transition: ease .4%;
  animation: animate 2s infinite;
}

.myButton:hover{
  background-position: right center;
  color: #fff;
  text-decoration: none;
}
</style>
